<template>
  <div>
    <ul v-show="!noneComments">
      <li style="list-style-type: none" v-for="index in showNum" :key="index">
        <span>{{ showComments[index - 1].commentId }}：</span>
        <!-- <el-rate
          v-model="showComments[index - 1].commentLevel"
          disabled
          show-score
          text-color="#ff9900"
          score-template="{value}"
        >
        </el-rate> -->
        <span>{{ showComments[index - 1].content }}</span
        ><br />
        <!-- <div style="margin-top: 30px">
          <span
            >时间：{{ showComments[index - 1].commentTime | formatTime }}</span
          >
        </div> -->
        <el-divider></el-divider>
      </li>
      <div style="text-align: center">
        <el-button
          v-show="!loadAllComments"
          type="danger"
          @click="readMoreComments"
          >点击加载更多</el-button
        >
        <span v-show="loadAllComments">全部评论</span>
      </div>
    </ul>
    <div style="text-align: center" v-show="noneComments">暂无数据</div>
  </div>
</template>

<script>
export default {
  name: "CommentDetail",
  props: ["comments"],
  data() {
    return {
      showComments: [], //由于 ajax 请求， 需要延时（使用定时）将comments赋值给showComments
      showNum: 0, //最初显示条数
      noneComments: true,
      loadAllComments: false,
    };
  },
  watch: {},
  // filters: {
  //   formatTime(time) {
  //     console.log(time);
  //     let end = time.indexOf("T");
  //     return time.slice(0, end);
  //   },
  // },
  mounted() {
    let len = 0;
    setTimeout(() => {
      this.showComments = this.comments;
      console.log("showComments", this.showComments);
      len = this.showComments.length;
      console.log("len", len);
      if (len === 0) {
        this.showNum = 0;
      } else {
        this.noneComments = false;
        if (len <= 3) {
          this.showNum = len;
          this.loadAllComments = true;
        } else {
          this.showNum = 3;
        }
      }
    }, 800);
  },
  methods: {
    readMoreComments() {
      if (
        this.showNum < this.showComments.length &&
        this.showNum + 2 < this.showComments.length
      ) {
        this.showNum += 2;
      } else {
        this.showNum = this.showComments.length;
        this.loadAllComments = true;
      }
    },
  },
};
</script>

<style></style>
